<template>
  <div class="menu-wrapper">
    <!--    <company-dialog ref="officeDialog" @confirm="dialogConfirm" />-->
    <!--    <office-dialog ref="officeDialog" @confirm="officeConfirm"/>-->
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <div
        style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px"
      >
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">账户资料</span>
      </div>
      <el-form-item label="注册手机:">
        <el-col :span="6">
          <span>{{ form.mobile }}</span>
        </el-col>
      </el-form-item>
      <el-form-item label="公司名称:">
        <el-col :span="6">
          <span>{{ form.name }}</span>
        </el-col>
      </el-form-item>
      <!--<el-form-item label="客户 ID:" prop="id">-->
        <!--<el-col :span="6">-->
          <!--<span>{{ form.id }}</span>-->
        <!--</el-col>-->
      <!--</el-form-item>-->
      <el-form-item label="Logo:" prop="logo">
        <el-col :span="6">
          <el-image :src="form.logo" style="width: 50px; height: 50px; vertical-align:middle; overflow: hidden;"></el-image>
          <!--<el-image v-src="form.logo" style="height:50px; width:50px;"/>-->
        </el-col>
      </el-form-item>
      <el-form-item label="联系人:" prop="linkman">
        <el-col :span="6">
          <span>{{ form.linkman }}</span>
        </el-col>
      </el-form-item>
      <el-form-item label="联系电话:" prop="phone">
        <el-col :span="6">
          <span>{{ form.phone }}</span>
        </el-col>
      </el-form-item>
      <el-form-item label="详情地址:" prop="address">
        <el-col :span="6">
          <span>{{ form.address }}</span>
        </el-col>
      </el-form-item>
<!--      <el-form-item label="所属账户:" prop="companyId">-->
<!--        <el-col :span="6">-->
<!--          <span>{{ form.companyId }}</span>-->
<!--        </el-col>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="所属集团:" prop="groupId">-->
<!--        <el-col :span="6">-->
<!--          <span>{{ form.groupId }}</span>-->
<!--        </el-col>-->
<!--      </el-form-item>-->

      <!--<el-form-item label="审核资料:" prop="meta">-->
        <!--<el-col :span="6">-->
          <!--<span>{{ form.meta }}</span>-->
        <!--</el-col>-->
      <!--</el-form-item>-->
      <!--<el-form-item label="审核资料:" prop="meta">-->
        <!--<el-col  :xs="24">-->
           <!--<security :shipping-date="shippingDate" :companyInformation='form.meta' :companyId="form.id"/>-->
          <!---->
        <!--</el-col>-->
      <!--</el-form-item>-->
      <el-form-item
        label="状态:"
        prop="status">
        <el-col :span="6">
          <el-tag :type="form.status == 1?'success':'info'">
            <span>{{ form.status | watchStatus }}</span>
          </el-tag>
        </el-col>
      </el-form-item>
      <el-form-item>
        <div class="button">
        <el-tooltip class="item" effect="dark" placement="top-start" content="审核" v-permission="['company.process']" v-if="form.status !== 1">
            <el-button :loading="loading" @click="checkClick()" type="primary" size="mini">审核</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" placement="top-start" content="驳回" v-permission="['company.reject']">
            <el-button @click="rejectClick()" type="warning" size="mini">驳回</el-button>
        </el-tooltip>
        </div>
      </el-form-item>
    </el-form>

    <el-dialog
      title="驳回请求"
      :visible.sync="isShow"
      width="40%"
      left>
      <div style="display: flex; flex-direction: column; justify-content: center;align-items: stretch;font-size: 15px; line-height: 30px;padding: 0 5vw">
        <div style="display: flex; flex-direction: row; justify-content: center; align-items: center;font-size: 15px; line-height: 30px;margin:0">
          <span style="width:120px;letter-spacing:6px;text-align: center;padding-left: 3px;">审核说明:</span>
          <el-input style="height: 90%" @change="rejectClick" v-model="form.msg"  clearable placeholder="请输入驳回原因"></el-input>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
<!--        <el-button @click="">取消</el-button>-->
        <el-button type="primary" :loading="loading" @click="updateCompany()">驳回</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<style scoped>
.menu-wrapper {
  margin: 15px;
}

.button {
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}
.dialog-footer{
  display: flex;
  justify-content: flex-end;
}
</style>
<script>
import {EventBus} from "@/api/eventBus";
import {update, find, list} from "@/api/company";
// import md5 from "js-md5";
// import Distpicker from "@/components/Distpicker/Distpicker";
import utils from "../../utils/utils.js";
import QueryGroup from "@/components/Query/queryGroup";
import QueryCompany from "@/components/Query/queryCompany";
import security from "@/views/company/components/Security";
import permission from "@/directive/permission/index.js"; // 权限判断指令

export default {
  name: "company-detail",
  directives: {permission},

  filters: {
    watchType(val) {
      if (val == 1) {
        return '供应商'
      } else {
        return '采购方'
      }
    },
    watchStatus(val) {
      if (val == 1) {
        return '已认证'
      } else {
        return '未认证'
      }
    },

  },
  components: {
    QueryGroup,
    QueryCompany,
    security,
    // officeDialog,
  },
  data() {
    return {
      shippingDate:'',
      companyList: [],
      pageNum: 1,
      pageSize: 20,
      userId: '',
      userName: '',
      loading: false,
      isShow: false,
      customerCheckForm: {
        id: '',
        status: '',
        msg:"",
      },
      form: {
        id: '',
        name: "",        //公司名称
        logo: "",         //公司Logo
        address: "",	    //详情地址
        linkman: "",	    //联系人
        phone: "",        //联系电话
        companyId: '',    //所属账户
        groupId: '',     //所属集团
        userId: '',       //管理员
        meta: '',         //审核资料
        // metaInfo :{
        //   chemical:"",
        //   license :"",
        //   licenseCode:'',
        //   other:"",
        //   wholesale:"",
        // },
        msg: "",          //审核说明
        status: 0,        //状态(0.未认证,1.已认证)
        type: null,       //客户类型(1.供应商,2.采购方)
        // createDate :"",   //创建日期
        // modifyDate :"",   //修改日期
      },
      rules: {
        msg: [
          {required: true, message: "请输入审核说明", trigger: "blur"},
        ]
      }
    };
  },
  created() {
    var _this = this;
    _this.getData();
    // _this.loadCustomer()
  },
  watch: { // 路由地址不变的情况下,如果id变化则重新获取数据
    $route(newVal, oldVal) {
      if (newVal.name == 'company-detail' && newVal.query.id != this.id) {
        this.getData()
      }
    },
    status(newVal, oldVal) {
      this.form.status = newVal;
    }
  },
  methods: {
    remoteMethod(query) {
      this.loadCustomer(query)
    },

    loadCustomer(id) {
      var _this = this;
      let params = new URLSearchParams();
      params.append("pageNum", _this.pageNum);
      params.append("pageSize", _this.pageSize);
      list(params).then(response => {
        if (response.type == "success") {
          console.log("load", response.data.data)
          response.data.data.forEach(item => {
            if (item.id == id) {
              console.log("load", item)
              _this.form = item;
            }
          })
        }
      }).catch(error => {
        console.log('error!!')
      });
    },

    getData() {
      this.form.id = this.$route.query.id;
      var _this = this;
      find(_this.form.id)
        .then(response => {
          console.log("请求返回的数据" + JSON.stringify(response));
          if (response.type == "success") {
            _this.form = response.data.company;
            // _this.form.id = response.data.company.id;
            // _this.form.name = response.data.company.name;
            // _this.form.people = response.data.company.people;
            // _this.form.status = response.data.company.status;
            // _this.form.communityId=response.data.company.communityId;
            // _this.form.communityName=response.data.company.communityName;
            // _this.form.mobile=response.data.company.mobile;
            // _this.form.buildingId=response.data.company.buildingId;
            // _this.form.buildingName=response.data.company.buildingName;
            // _this.form.address=response.data.company.address;
          } else {
            _this.$message({
              // message: response.content,
              offset: 120,
              center: true
            });
          }
        })
        .catch(error => {
        });
    },


    // 驳回
    rejectClick() {
      let _this = this;
      _this.isShow = true;
      _this.customerCheckForm.id = this.form.id;
      _this.customerCheckForm.status = 2;
      _this.customerCheckForm.msg = this.form.msg;
      _this.customerCheckForm.status = parseInt(this.customerCheckForm.status);
      console.log(this.customerCheckForm.status, "--", this.form.status)
    },

    checkClick() {
      let _this = this;

      this.$confirm('是否确定通过认证?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
      }).then(() => {

        _this.loading = true;
        _this.customerCheckForm.id = this.form.id;
        _this.customerCheckForm.status = 1;
        update(_this.customerCheckForm).then(res => {
          _this.loading = false;
          if (res.type == "success") {
            let data = _this.formatList(res.data);
            console.log("审核完返回给列表的数据--" + JSON.stringify(data));
            EventBus.$emit("company-edit", data);
            _this.$store
              .dispatch("tagsView/delView", _this.$route)
              .then(({visitedViews}) => {
                _this.$router.push({
                  path: "/company/list",
                  query: {id: _this.form.id}
                });
              }); // 关闭当前tab回到列表
          } else {
            _this.$message({
              message: res.content,
              offset: 120,
              center: true
            });
          }
        })
          .catch(error => {
            _this.loading = false;
          });

      });

    },
    updateCompany() {
      const _this = this;
        var list = {
          id : this.form.id,
          status : 2,
          msg : this.form.msg,
        }
      console.log("数据--" + list.msg,this.customerCheckForm);
      if(list.msg !== ""){
          _this.loading = true;
          update(list)
            .then(response => {
              _this.loading = false;
              _this.isShow = false;
              if (response.type == "success") {
                let data = _this.formatList(response.data);
                console.log("修改完返回给列表的数据--" + JSON.stringify(data));
                EventBus.$emit("company-edit", data);
                _this.$store
                  .dispatch("tagsView/delView", _this.$route)
                  .then(({visitedViews}) => {
                    _this.$router.push({
                      path: "/company/list",
                      query: {id: _this.form.id}
                    });
                  }); // 关闭当前tab回到列表
              } else {
                _this.$message({
                  message: response.content,
                  offset: 120,
                  center: true
                });
              }
            })
            .catch(error => {
              _this.loading = false;
              _this.isShow = false;
            });
        }else{
          _this.$message({
            message: "驳回原因不能为空",
            offset: 120,
            center: true,
            type:"error"
          });
        }

      //   } else {
      //     return false;
      //   }
      // });
    },
    //过滤成日期
    formatDate2Day(val) {
      let date = new Date(val);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + MM + "-" + d;
    },

    //过滤到时间
    formatDate2Time(val) {
      let date = new Date(val);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },

    //过滤企业列表
    formatList(data) {
      data.createDate = this.formatDate2Day(data.createDate);
      data.modifyDate = this.formatDate2Time(data.modifyDate);
      data.rechangeDate = this.formatDate2Time(data.rechangeDate);
      return data;
    },
  }
};
</script>
